<html xmlns:th="http://www.thymeleaf.org">

    <div class="lesson-page-wrapper">
        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
        <!-- include content here, or can be placed in another location. Content will be presented via asciidocs files,
        which go in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
        <div class="adoc-content" th:replace="~{doc:lessons/authbypass/documentation/bypass-intro.adoc}"></div>
    </div>

    <div class="lesson-page-wrapper">
        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
        <!-- include content here, or can be placed in another location. Content will be presented via asciidocs files,
        which go in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
        <div class="adoc-content" th:replace="~{doc:lessons/authbypass/documentation/2fa-bypass.adoc}"></div>
        <div class="attack-container">
            <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
            <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
            <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
            <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->

            <!-- modify the action to point to the intended endpoint and set other attributes as desired -->
            <script th:src="@{/lesson_js/bypass.js}" />
            <form class="attack-form" accept-charset="UNKNOWN" id="verify-account-form"
                  method="POST" name="form"
                  successCallback="onBypassResponse"
                  action="auth-bypass/verify-account">
                <p>Verify Your Account by answering the questions below:</p>

                <p>What is the name of your favorite teacher?</p>
                <input name="secQuestion0" value="" type="TEXT" /><br/>

                <p>What is the name of the street you grew up on?</p>
                <input name="secQuestion1" value="" type="TEXT" /><br/><br />

                <input type="hidden" name="jsEnabled" value="1" />
                <input type="hidden" name="verifyMethod" value="SEC_QUESTIONS" />
                <input type="hidden" name="userId" value="12309746" />

                <input name="submit" value="Submit" type="submit"/>

            </form>

            <form class="attack-form" accept-charset="UNKNOWN" id="change-password-form"
                  method="POST" name="form"
                  successCallback="onBypassResponse"
                  action="auth-bypass/verify-account"
                  style="display:none"><!-- start off hidden -->
                <p>Please provide a new password for your account</p>

                <p>Password:</p>
                <input name="newPassword" value="" type="password" /><br/>

                <p>Confirm Password:</p>
                <input name="newPasswordConfirm" value="" type="password" /><br/><br />

                <input type="hidden" name="userId" value="12309746" />

                <input name="submit" value="Submit" type="submit"/>

            </form>

            <!-- do not remove the two following div's, this is where your feedback/output will land -->
            <!-- the attack response will include a 'feedback' and that will automatically go here -->
            <div class="attack-feedback"></div>
            <!-- output is intended to be a simulation of what the screen would display in an attack -->
            <div class="attack-output"></div>
        </div>

    </div>

    <!--<div class="lesson-page-wrapper">-->
        <!-- reuse the above lesson-page-wrapper block for each 'page' of content in your lesson -->
        <!-- include content here, or can be placed in another location. Content will be presented via asciidocs files,
        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
        <!--<div class="adoc-content" th:replace="~{doc:lessons/authbypass/documentation/lesson-template-video.adoc}"></div>-->
        <!-- can use multiple adoc's in a page-wrapper if you want ... or not-->
        <!--<div class="adoc-content" th:replace="~{doc:lessons/authbypass/documentation/lesson-template-attack.adoc}"></div>-->

        <!-- WebGoat will automatically style and scaffold some functionality by using the div.attack-container as below -->

    <!--</div>-->

    <!-- repeat and mix-and-match the lesson-page-wrappers with or wihtout the attack-containers as you like ...
        see other lessons for other more complex examples -->

</html>
